import deepcopy from "deepcopy";
import { ElButton, ElColorPicker, ElForm, ElFormItem, ElInput, ElInputNumber, ElOption, ElSelect } from "element-plus";
import { defineComponent, inject, reactive, watch } from "vue";
import { TablePropEditor } from "./table-prop-editor";

// 属性工具栏
export const VisualOperatorEditor = defineComponent({
  props: {
    block: { type: Object }, // 选中的元素
    dataModel: {
      // 绘图区的数据对象
      type: Object,
      required: true,
    },
    formData: {
      // 表单数据
      type: Object,
    },
    updateBlock: {
      // 更新单个组件
      type: Function,
      required: true,
    },
    updateModelValue: {
      // 更新当前绘图区
      type: Function,
      required: true,
    },
  },
  setup(props) {
    const state = reactive({
      editData: {},
    });

    const methods = {
      apply: () => {
        // 应用属性
        if (!props.block) {
          // 未选择任何元素 绘图区
          props.updateModelValue({
            ...props.dataModel.value,
            container: state.editData,
          });
        } else {
          // 编辑当前的block数据属性
          const newBlock = state.editData;
          props.updateBlock(newBlock, props.block);
        }
      },
      reset: () => {
        if (!props.block) {
          // 未选中元素  绘图区
          state.editData = deepcopy(props.dataModel.value.container);
        } else {
          // 选中元素
          state.editData = deepcopy(props.block);
        }
      },
    };

    // 监听元素选中状态
    watch(
      () => props.block,
      () => {
        methods.reset();
      },
      {
        immediate: true,
      }
    );

    // 渲染属性函数
    const rednerEditor = (propName, propConfig) => {
      console.log("🚀 ~ rednerEditor ~ propName, propConfig:", propName, propConfig);
      return {
        input: () => (
          // 输入框类型
          <ElInput v-model={state.editData.props[propName]} />
        ),
        color: () => (
          // 颜色框
          <ElColorPicker v-model={state.editData.props[propName]} />
        ),
        select: () => (
          <ElSelect placeholder="请选择" v-model={state.editData.props[propName]}>
            {(() => {
              return propConfig.options.map((opt, i) => <ElOption key={i} label={opt.label} value={opt.val} />);
            })()}
          </ElSelect>
        ),
        text: () => <ElInput v-model={state.editData.props[propName]} />,
        table: () => <TablePropEditor v-model={state.editData.props[propName]} propConfig={propConfig} />,
      }[propConfig.type]();
    };

    return () => {
      let content = []; // 属性工具栏显示的内容
      if (!props.block) {
        // 未选择元素
        content.push(
          <>
            <ElFormItem label="容器宽度">
              <ElInputNumber v-model={state.editData.width} {...{ step: 100 }}></ElInputNumber>
            </ElFormItem>
            <ElFormItem label="容器高度">
              <ElInputNumber v-model={state.editData.height} {...{ step: 100 }}></ElInputNumber>
            </ElFormItem>
          </>
        );
      } else {
        // 选中了元素，就使用元素的属性
        const config = inject("config");
        const { key } = props.block;
        const component = config?.componentMap[key];

        if (component) {
          content.push(
            <ElFormItem label="组件标识">
              <ElInput v-model={state.editData.slotName} />
            </ElFormItem>
          );
          if (component.props) {
            content.push(
              <>
                {Object.entries(component.props).map(([propName, propConfig]) => {
                  return (
                    <ElFormItem label={propConfig.label} {...{ labelPosition: "top" }} key={propName}>
                      {rednerEditor(propName, propConfig)}
                    </ElFormItem>
                  );
                })}
              </>
            );
          }
          if (component.model) {
            content.push(
              <>
                {Object.entries(component.model).map(([modelName, label], i) => {
                  console.log("lable:", label, modelName);
                  return (
                    <ElFormItem {...{ labelPosition: "top" }} label={label} key={i}>
                      <ElInput v-model={state.editData.model[modelName]} />
                    </ElFormItem>
                  );
                })}
              </>
            );
          }
        }
      }

      return (
        <div class="operator">
          <ElForm>
            {content.map((el) => el)}
            <ElFormItem>
              <ElButton type="primary" {...{ onClick: methods.apply }}>
                应用
              </ElButton>
              <ElButton {...{ onClick: methods.reset }}>重置</ElButton>
            </ElFormItem>
          </ElForm>
        </div>
      );
    };
  },
});
